<template>
    <div class="wrapBox">
        <div class="count">
            <img class="topImg" src="http://assets.rurushishi.com/activies/gzld/leftText.png" alt="">
            围观人数：{{count.total}} 中奖人数：{{ count.prizeCount }}
            <img class="topImg" src="http://assets.rurushishi.com/activies/gzld/rightText.png" alt="">
        </div>
        <p class="goGame" @click="goGame()"></p>
        <p class="handImg"></p>
        <div class="btnBox">
            <p class="goRank" @click="goRank()"></p>
            <p class="goPrizeShow" @click="goPrizeShow()"></p>
            <p class="goPrize" @click="goPrize()"></p>
            <p class="goRule" @click="goRule()"></p>
        </div>
        <music></music>
        <share :isshare="isshare"></share>
        <Bottom :baseText="baseText"></Bottom>
    </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import request from "@/utils/request";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "./components/Share";
import Bottom from "@/components/common/Bottom";
import music from "./components/music";
export default {
    // 引入组件
    components : {
        share: Share,
        Bottom: Bottom,
        music: music
    },
    data(){
        return {
            openid: Cookies.get("openid"),
            userInfo: null, //用户信息
            receiveSpreadInfo: {
                channel: 0, //渠道
                fuid: "", //传播者的openid
                ouid: "" //销售或渠道的openid
            },
            count:{
                total:0,
                prizeCount:0
            },
            isplay: false, //音乐是否播放
            isshare: false, //是否开启分享 也用于从别的页面返回回来展示分享
            baseText: config.BASE_TEXT, //页脚文本
        }
    },
    methods:{
        goGame(){
            this.pushUrl('main')
        },
        goRank(){
            this.pushUrl('rank')
        },
        goPrizeShow(){
            this.pushUrl('prizeShow')
        },
        goPrize(){
            this.pushUrl('prize')
        },
        goRule(){
            this.pushUrl('rule')
        },
        // 参加活动，返回是否领过读语言和助力的奖品、统计人数
        getCount() {
        let that = this;
        request
            .post(
            `${that.global.API_ACT_URL}participate?activityId=${
                config.activityId
            }&openId=${that.openid}&channel=${that.receiveSpreadInfo.channel}${
                that.receiveSpreadInfo.fuid
                ? "&fromOpenId=" + that.receiveSpreadInfo.fuid
                : ""
            }`,
            {}
            )
            .then(function(data) {
            if (data.total) {
                data.total = (data.total * 1.5).toFixed(0);
            }
            // if (data.prizeCount) {
            //   data.prizeCount = (data.prizeCount * 1.5).toFixed(0);
            // }
            that.count = data;
            });
        },
        // 直接跳转本项目的其他链接
        gotoUrl(page) {
        // 带上本页面的传播信息
        let url =
            location.protocol +
            "//" +
            location.host +
            this.global.GLOBAL_BASE_PATH +
            "/";
        let fullPathNoShare = this.$route.fullPath;
        fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
        fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
        if (fullPathNoShare.indexOf("?") > -1) {
            url += page + "?" + fullPathNoShare.split("?")[1];
        } else {
            url += page;
        }
        location.href = url;
        },
        // 通过路由方式跳转本项目的其他链接(跳转到无需授权的)
        pushUrl(page) {
        // 带上本页面的传播信息
        let url = "";
        let fullPathNoShare = this.$route.fullPath;
        fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
        fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
        if (fullPathNoShare.indexOf("?") > -1) {
            url = page + "?" + fullPathNoShare.split("?")[1];
        } else {
            url = page;
        }
        this.$router.push("/" + url);
        },
        // /api/kiss/recordVisitor
        recordVisitor(){
                    let that = this;
        request
            .post(
            `${that.global.API_FORUM_URL}/api/kiss/recordVisitor?activityId=${
                config.activityId
            }&openId=${that.openid}${that.receiveSpreadInfo.fuid
                ? "&fromOpenId=" + that.receiveSpreadInfo.fuid: ""
            }`,
            {}
            )
            .then(function(data) {
                console.log(JSON.stringify(data))
            });
        },
        /**
         * 初始化
         * 1、设置传播传播信息
         * 2、获取用户信息
         * 3、设置分享信息
         */
        init() {
            console.log(2134)
        let that = this;
        // 设置传播信息
        if (this.$route.query.channel)
            this.receiveSpreadInfo.channel = this.$route.query.channel;
        if (this.$route.query.fuid)
            this.receiveSpreadInfo.fuid = this.$route.query.fuid;
        if (this.$route.query.ouid)
            this.receiveSpreadInfo.ouid = this.$route.query.ouid;
        if (this.$route.query.isshare) that.isshare = true;
        config.getUserInfo().then(function(userInfo) {
            that.userInfo = userInfo;
            that.getCount();
            that.recordVisitor();
            // 设置分享 标题 链接 回调
            let shareObj = {
            title: "",
            link: ""
            };
            if (
            that.userInfo &&
            that.userInfo.user &&
            that.userInfo.user.nickname
            ) {
            shareObj.title = `${
                that.userInfo.user.nickname
            }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
            }

            if (that.userInfo.salerOrAgent) {
            // 是销售或者渠道,更新ouid
            shareObj.link = `${config.SHARE_LINK}?channel=${
                that.receiveSpreadInfo.channel
            }&fuid=${that.openid}&ouid=${that.openid}`;
            } else {
            shareObj.link = `${config.SHARE_LINK}?channel=${
                that.receiveSpreadInfo.channel
            }&fuid=${that.openid}${
                that.receiveSpreadInfo.ouid
                ? "&ouid=" + that.receiveSpreadInfo.ouid
                : ""
            }`;
            }
            config.initShare(shareObj);
            that.global.SHARE_CALLBACK_OK = function(type) {
            that.shareCallBack();
            };
        });
        }
    },
    mounted(){},
    created(){
        this.init()
    }
}
</script>
<style lang="stylus" scoped>
.wrapBox{
    width 100%
    height 100%
    min-height 12.06rem
    background url('http://assets.rurushishi.com/activies/gzld/indexBg2.jpg')
    background-size 100% 100%
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.count{
    position absolute
    top 10%
    width 100%
    text-align center
    line-height .44rem
    color #f12073
}
.count .topImg{
    width .2rem
    height .44rem
}
.goGame{
    width 3.54rem
    height 1.41rem
    background url('http://assets.rurushishi.com/activies/gzld/goGame.png')
    background-size 100% 100%
    position absolute
    top 45.19%
    left 50%
    margin-left -1.75rem
    // animation sharke 3s infinite;
    z-index 999
}
.handImg{
    width .54rem
    height .66rem
    background url('http://assets.rurushishi.com/activies/gzld/handIndex.png')
    background-size 100% 100%
    position absolute
    top 53%
    left 65.73%
    animation breathe 2.5s infinite;
    z-index 1
}
.btnBox{
    display flex
    width 100%
    position absolute
    top 64.09%
    justify-content space-around
}
.btnBox p{
    width 1.27rem
    height .42rem
}
.goRank{
    background url('http://assets.rurushishi.com/activies/gzld/rank.png')
    background-size 100% 100%
}
.goPrizeShow{
    background url('http://assets.rurushishi.com/activies/gzld/prizeShow.png')
    background-size 100% 100%
}
.goRule{
    background url('http://assets.rurushishi.com/activies/gzld/rule.png')
    background-size 100% 100%
}
.goPrize{
    background url('http://assets.rurushishi.com/activies/gzld/prize.png')
    background-size 100% 100%
}
@keyframes breathe{
    0%{ transform: scale(.99); }
    50%{ transform: scale(1.53); }
    100%{ transform: scale(.99); }
}
@-webkit-keyframes sharke {
    0% {
        transform: translateX(5px) rotate(20deg);
        -webkit-transform: translateX(5px) rotate(20deg);
    }
    4% {
        transform: translateX(-5px) rotate(-20deg);
        -webkit-transform: translateX(-5px) rotate(-20deg);
    }
    8% {
        transform: translateX(5px) rotate(20deg);
        -webkit-transform: translateX(5px) rotate(20deg);
    }
    12% {
        transform: translateX(-5px) rotate(-20deg);
        -webkit-transform: translateX(-5px) rotate(-20deg);
    }
    16% {
        transform: translateX(5px) rotate(20deg);
        -webkit-transform: translateX(5px) rotate(20deg);
    }
    20% {
        transform: translateX(-5px) rotate(-20deg);
        -webkit-transform: translateX(-5px) rotate(-20deg);
    }
    22% {
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        transform: translateX(0px) rotate(0deg);
    }
}
</style>
